<!DOCTYPE html>
<html manifest="app.cache">
<!--<html>-->
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=0, initial-scale=1.0" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link href="icon.png" rel="apple-touch-icon-precomposed" />
        <link href="icon.png" rel="icon" type="image/png" />

        <title>CinemaCityBG</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="base.js"></script>
        <script src="iscroll.js"></script>
    </head>
    <body>
        <section id="cinemas" class="cinemas page">
            <header><h2 class="logo">CinemaCity BG</h2></header>
            <ul id="cinemas-list" class="list"></ul>
        </section>
        <section id="main" class="program page">
            <div id="mask" class="mask" data-activatable="true" style="display: none;"></div>
            <section id="program" class="page">
                <header>
                    <div id="menu-button" class="button icon-list" data-activatable="true"></div>
                    <h1>
                        <span id="cinema-name"></span><small id="date"></small><small class="down icon-caret-down"></small>
                        <select id="select-date" data-activatable="true"></select>
                    </h1>
                    <div id="refresh-button" class="button icon-repeat" data-activatable="true"></div>
                    <div style="display: none;" id="filter-button" class="button icon-ellipsis-vertical" data-activatable="true"></div>
                </header>
                <ul id="filter-list" class="drop-down">
                    <li id="all" data-activatable="true">All</li>
                    <li id="2d" data-activatable="true">2D</li>
                    <li id="3d" data-activatable="true">3D</li>
                    <li id="4dx" data-activatable="true">4DX</li>
                    <li id="b" data-activatable="true">(B)</li>
                </ul>
                <div class="content" data-scrollable="true">
                    <ul class="list" id="program-list"></ul>
                </div>
            </section>
            <section id="movie" class="movie page">
                <header>
                    <div id="back-button" class="button icon-arrow-left" data-activatable="true"></div>
                </header>
                <div class="content" data-scrollable="true">
                    <div id="movie-content">
                        <h3 id="movie-title"></h3>
                        <div class="image" id="movie-image"></div>
                        <ul class="info-list" id="movie-info"></ul>
                        <p class="desc" id="movie-desc"></p>
                    </div>
                </div>
            </section>
            <div id="loader" class="loader-wrapper">
                <div class="loader icon-spinner"></div>
            </div>
        </section>

        <section id="alert" class="alert page">
            <div class="message">
                <div class="text" id="alert-text"></div>
                <div>
                    <div id="ok-button" class="button" data-activatable="true">Ok</div>
                    <div id="cancel-button" class="button inactive" data-activatable="true">Cancel</div>
                </div>
            </div>
        </section>

        <script src="app.js"></script>
    </body>
</html>